<template>
  <div class="box">
  <!-- 顶部 -->
    <van-nav-bar
    title="CINV综合管理信息"
     @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right" src="@/assets/img/down_left.png" alt="">
      </template>
    </van-nav-bar>
     <div class="title">
          <span class="i"></span>
          <span>CINV用药处方</span>
      </div>
      <!-- CINV用药处方 -->
      <div class="cycle">
        <div class="items">
          <van-row>
            <van-col span="15" class="p">
                    抗肿瘤药物致吐风险
              </van-col>
              <van-col span="8" class="zhong">
                    {{info.risk}}
              </van-col>
          </van-row>
        </div>
         <div class="items active_2">
          <van-row>
                  <van-col span="18" class="p">
                    CINV个体化风险评分
                  </van-col>
                  <van-col span="6" class="num">
                    {{info.dranitsaris}}
                  </van-col>
                </van-row>
        </div>
        <div class="items active_3">
          <van-row>
                  <van-col span="10" class="p">
                   预防止吐推荐
                  </van-col>
                  <van-col span="14" >
                    <div class="grey" style="text-align:center">{{info.recommend}}</div>
                    <!-- <div class="grey">(NK-1 RA+5-HT3RA+激素)</div> -->
                  </van-col>
                </van-row>
        </div>
      </div>
      <div class="title" v-if="info.yao_fang && info.yao_fang.length !== 0">
          <span class="i"></span>
          <span>CINV用药处方</span>
      </div>
      <!-- 用药处方 -->
      <div class="prescription" v-if="info.yao_fang && info.yao_fang.length !== 0">
        <PrescriptionCard :prescriptionList="info.yao_fang"></PrescriptionCard>
      </div>
      <div class="title" v-if="info.outu_list">
          <span class="i"></span>
          <span>恶心呕吐情况</span>
      </div>
      <!-- 恶心呕吐情况 -->
      <div class="nausea" v-if="info.outu_list">
          <div class="item" v-for="(item, index) in info.outu_list" :key="index" @click="nauseaDetail(item)">
            <span class="circular" v-if="item.color === 'red'">{{info.outu_list.length - index}}</span>
            <span class="circular" style="background-color: #45AE8B" v-if="item.color === 'green'">{{info.outu_list.length - index}}</span>
            <span class="circular" style="background-color: #FFC901" v-if="item.color === 'yellow'">{{info.outu_list.length - index}}</span>
            <span>{{item.date}}</span>
            <button>查看</button>
          </div>
      </div>

      <!-- 弹出层 -->
      <van-popup  v-model="infoShow">
        <h1>化疗后恶心呕吐情况调查表</h1>
        <p class="explain">恶心呕吐情况收集说明：请您每天记录恶心呕吐情况。您 填写的准确性及频繁性将影响您的下次治疗，请务必如实 填写，非常感谢！</p>
        <div class="detail">
            <div class="time">2021/6/18 15:00</div>
            <div class="ask">1.您今天是否有呕吐的发生？</div>
            <div class="answer">{{nauseaInfo.vomit === '1' ? '是' : '否'}}</div>
             <div class="ask">2.您今天出现几次呕吐？（间隔至少5分钟）</div>
            <div class="answer">{{nauseaInfo.vomit_number || 0}}</div>
             <div class="ask">3.您是否有恶心的感觉(含食欲不佳）</div>
            <div class="answer">{{nauseaInfo.nausea === '1' ? '是' : '否'}}</div>
             <div class="ask">4.如果您有恶心的情况，恶心严重程度是多少？ (0-10数字，越大程度越高)</div>
            <div class="answer">{{nauseaInfo.nausea_degree || 0}}</div>
             <div class="ask">5.您今天是否正常排便？若有请填写几次</div>
            <div class="answer">{{nauseaInfo.defecation === '1' ? '是' : '否'}}</div>
             <div class="ask">6.您今天是否发生腹泻？(至少间隔5分钟),若有请 填写几次</div>
            <div class="answer">{{nauseaInfo.defecation_number || 0}}</div>
        </div>
        <button class="x" @click="infoShow=false"> 关闭</button>
      </van-popup>
  </div>
</template>
<script>
import PrescriptionCard from '@/views/components/PrescriptionCard'
import { patientsCycleDetail } from '@/api/user'
export default {
  components: { PrescriptionCard },
  data () {
    return {
      infoShow: false,
      info: {},
      nauseaInfo: {}
    }
  },
  mounted () {
    this.patientsCycleDetail()
  },
  methods: {
    async patientsCycleDetail () {
      const { code, msg, data } = await patientsCycleDetail({ id: this.$route.query.id })
      if (code !== 1) return this.toast.fail(msg)
      this.info = data
      this.info.yao_fang = JSON.parse(data.cinv_prescription)
      this.info.outu_list = JSON.parse(data.vomiting)
    },
    nauseaDetail (item) {
      this.infoShow = true
      this.nauseaInfo = item
    }
  }
}
</script>
<style scoped lang='less'>
.title{
       width: 100%;
       margin-top: 40px;
       .i{
         display: inline-block;
         margin-right: 5px;
         width: 3px;
         height: 14px;
         background: linear-gradient(180deg, #3EB3FF 0%, #436EFF 100%);
         opacity: 1;
       }
       span{
       display: inline-block;
        height: 22px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 22px;
        color: #000000;
        opacity: 1;
        }
 }
.icon_right{
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.box{
  width: 100%;
  padding: 8px 20px;
  box-sizing: border-box;
     .cycle{
      width: 100%;
      .items{
        width: 100%;
        height: 54px;
        margin: 14px auto;
        padding: 10px 20px;
        box-sizing: border-box;
        border-radius: 8px;
        background: url('../../assets/img/info_1.png') no-repeat;
        background-size: 100%;
                .num{
          font-size: 26px;
          font-family: DIN Alternate;
          font-weight: bold;
          line-height: 40px;
          color: #ffffff;
        }
        .p{
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 600;
          line-height: 30px;
          color: #FFFFFF;
        }
        .zhong{
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 18px;
          color: #FFFFFF;
          text-align: center;
        }
        .grey{
          height: 17px;
           font-size: 12px;
           font-family: PingFang SC;
           font-weight: 400;

           color: #FFFFFF;
        }
      }
      .active_2{
        background: url('../../assets/img/info_2.png') no-repeat;
        background-size: 100%;
      }
      .active_3{
        background: url('../../assets/img/info_3.png') no-repeat;
        background-size: 100%;
      }
    }
     .prescription{
      width: 100%;
    }
    .nausea{
      width: 100%;
      // height: 163px;
      background: #FFFFFF;
      border: 1px solid rgba(112, 112, 112, 0.23137254901960783);
      border-radius: 8px;
      margin-top: 10px;
      padding: 12px 14px;
      padding-bottom: 5px;
      box-sizing: border-box;
      .item{
        width: 100%;
        margin-bottom: 10px;
        span{
          display: inline-block;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 600;
          vertical-align: middle;
          // line-height: 30px;
          color: #161616;
        }
        .circular{
          width: 20px;
          height: 20px;
           vertical-align: middle;
          border-radius: 50%;
          line-height: 20px;
          text-align: center;
          color: #FFFFFF;
          background-color: #ED4C4D;
          margin-right: 6px;
        }
        .active_c2{
          background-color: #FFC901;
        }
        .active_c1{
          background-color: #45AE8B;
        }
        button{
          width: 39px;
          height: 17px;
          background: linear-gradient(180deg, #3EB3FF 0%, #436EFF 100%);
          border-radius: 9px;
          font-size: 12px;
           vertical-align: middle;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          border: none;
          margin-left: 8px;
        }
      }
    }
     /deep/.van-popup{
    width: 85%;
    padding: 20px 18px;
    box-sizing: border-box;
    border-radius: 8px;
    h1{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 22px;
      color: #161616;
      text-align: center;
     }
     .explain{
       font-size: 11px;
       font-family: PingFang SC;
       font-weight: 400;
       line-height: 15px;
       color: #ED4C4D;
       margin: 10px auto;
       letter-spacing: 1px;
     }
      .detail{
        width: 100%;
        border-top: 1px solid rgba(112, 112, 112, 0.1843137254901961);
        .time{
          font-size: 14px;
          margin-top: 6px;
          font-family: PingFang SC;
          font-weight: 600;
          line-height: 20px;
          color: #161616;
          opacity: 0.5;
        }
        .ask{
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: #161616;
          margin: 4px auto;
        }
        .answer{
          margin: 4px auto;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: #4182FF;
        }
      }
      .x{
        display: block;
        width: 80%;
        height: 48px;
        background: linear-gradient(90deg, #3EB3FF 0%, #436EFF 100%);
        box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
        border-radius: 45px;font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        margin: 18px auto;
        border: none;
        line-height: 22px;
        color: #FFFFFF;
      }
  }
}
</style>
